<template>
<div class="upload-container">
  <!-- <div class="section">
    <div class="label">音频</div>
    <div class="audio-box" v-if="voicePath">
      <audio :src="basePath + voicePath" controls />
      <i class="el-icon-close" @click="remove('voicePath')" />
    </div>
    <el-button type="text" @click="handle('audio')" v-else>点击上传音频</el-button>
  </div> -->
  <!-- <div class="section">
    <div class="label">原声视频</div>
    <div class="video-box" v-if="videoPath">
      <video :src="basePath + videoPath" controls />
      <i class="el-icon-close" @click="remove('videoPath')" />
    </div>
    <el-button type="text" @click="handle('sound')" v-else>点击上传视频</el-button>
  </div> -->
  <!-- <div class="section" v-if="baseType === 11">
    <div class="label">无原声视频</div>
    <div class="video-box" v-if="silentVideoPath">
      <video :src="basePath + silentVideoPath" controls />
      <i class="el-icon-close" @click="remove('silentVideoPath')" />
    </div>
    <el-button type="text" @click="handle('non')" v-else>点击上传视频</el-button>
  </div> -->
</div>
</template>

<script lang="ts">
import $ from '$';

export default {
  props: ['voicePath', 'videoPath', 'silentVideoPath', 'baseType'],
  emits: ['update:voicePath', 'update:videoPath', 'update:silentVideoPath'],
  setup(props, { emit }) {
    let basePath = import.meta.env.VITE_APP_BASE_URL;

    const handle = (type: 'audio' | 'sound' | 'non') => {
      let input = $.element('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', type === 'audio' ? '.mp3' : '.mp4');
      input.click();
      input.onchange = async (e) => {
        let file = input.files![0];
        let formdata = new FormData();
        formdata.append('file', file);
        let res = await $.http.upload('/system/file/uploadFile', formdata);
        emit(type === 'audio' ? 'update:voicePath' : type === 'sound' ? 'update:videoPath' : 'update:silentVideoPath', res.json.filePath);
      }
    }
    const remove = (eventName: 'voicePath' | 'videoPath' | 'silentVideoPath') => emit(`update:${eventName}`, null);

    return { handle, basePath, remove }
  }
}
</script>

<style lang="scss" scoped>
.upload-container {
  audio {
    height: 36px;
  }
  video {
    width: 120px;
    height: 120px;
    background: #000;
  }
  .el-button {
    line-height: 1px;
    height: 26px;
    margin-left: 40px;
    min-height: 0;
  }
  .audio-box,
  .video-box {
    display: inline-block;
    margin-left: 40px;
    position: relative;
    i {
      display: block;
      width: 18px;
      height: 18px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      background: #FC514F;
      border-radius: 50%;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      margin: -4px -4px 0 0;
    }
  }
}
</style>